<div class='grid clearfix' id="gallery-grid-list">
  <{if count($products) > 0}>
  <ul>
    <{foreach from=$products key=key item=product name=goods}>
    <li class="items-gallery <{$mask_webslice}> itemsList items-gallery-gride" product="<{$product.goods_id}>">
        <!--商品图片-->
        <div class="goodpic" style="<{if $image_set.S.width}> width:216px;position:relative; margin:0 auto;height:216px;<{/if}>">
          <!--标签图片-->
          <{if $product.tags}>
              <{foreach from=$product.tags item=tags}>
                    <{assign var="tagImage" value=$tags.params.tag_image}>
                  <{if $tagImage}>
                  <div style="margin: 0 auto;">
                    <div class="goods-tip" style="filter:alpha(opacity=<{$tags.params.tag_opacity}>);position:absolute;">
                      <img src="<{$tagImage|storager}>" style="opacity:<{$tags.params.tag_opacity/100}>;filter:alpha(opacity=<{$tags.params.tag_opacity}>);" pos="<{$tags.params.pic_loc}>"/>
                    </div>
                  </div>
                  <{/if}>
              <{/foreach}>
          <{/if}>
          <!--商品图片-->
          <a target="_blank" href='<{if $product.goods_url}><{$product.goods_url}><{else}><{link app=b2c ctl=site_product act=index arg=$product.goods_id}><{/if}>' style='<{if $image_set.S.width}> width:216px; display: table-cell; vertical-align: middle; text-align: center; margin:0 auto;*font-size:<{$image_set.S.height*0.875}>px;height:216px;<{/if}>'>
            <{if $product.udfimg == 'true'}>
            <{assign var="gimage" value=$product.thumbnail_pic}>
            <{else}>
            <{assign var="gimage" value=$product.image_default_id|default:$defaultImage}>
            <{/if}>
            <{img src="images/transparent.gif" app="b2c" lazyload=$gimage|storager:'m' class="img-lazyload"  alt=$product.name|escape:html}>
          </a>
        </div>

        <!--规格选择-->
        <div class='productThumb' style="clear:both;height: 38px;margin-top:5px;">
            <a title="上一页" class="ui-slide-arrow-s proThumb-prev proThumb-disable"  style="visibility: visible;">&lt;</a>
            <div class="proThumb-wrap">        
              <p class="ks-switchable-content" style="position: absolute; width: 444px;left:0px;">          
              <{foreach from=$product.spec key=key1 item=spec}>
                <{if $spec.spec_type=='image'}>
                     <{foreach from=$spec.option key=key2 item=spec_item}>
                        <{if $spec_item.spec_goods_images.0}>
                            <{assign var=spec_image value=$spec_item.spec_goods_images.0}>
                            <{assign var=g_image value=$spec_item.spec_goods_images.0}>
                        <{else}>   
                            <{assign var=spec_image value=$spec_item.spec_image}>  
                            <{assign var=g_image value=$gimage}>                    
                        <{/if}>
                       <b class="proThumb-img" goods_link="<{link app=b2c ctl=site_product act=index arg0=$product.goods_id arg1=2 arg2=$key2}>" goods_image="<{$g_image|storager:m}>">
                        <{img src="images/transparent.gif" app="b2c" class="img-lazyload" lazyload=$spec_image|storager:'s'  alt=$spec_item.spec_value|escape:html title=$spec_item.spec_value|escape:html }>
                        <i></i>
                        </b>
                     <{/foreach}>
                <{/if}>
              <{/foreach}>             
              </p>
            </div>
            <a title="下一页" class='ui-slide-arrow-s proThumb-next' style="visibility: visible;">&gt;</a>
        </div>
         <!--规格选择结束-->
        <div class="goods-main">
        <div class="price-wrap">
           <ul class="price-item" >
           <li style="float:left;">
            <em class="sell-price">
              <{$product.price|cur_odr}>
            </em>
          </li>
          <!--市场价-->
            <li style="float:right;color: #CBCBCB;">
               <{if $product.mktprice>0 &&$product.mktprice!=$product.price && $setting.mktprice eq true}>
               <del style='color: #CBCBCB;'>
                   <{$product.mktprice|cur_odr}>
               </del>
               <{else}>
                  &nbsp;
               <{/if}>
           </li>
          </ul>
          </div>
        <div class="goodinfo" style="padding:5px 0 0;">
            <h3>
            <a target='_blank' href="<{if $product.goods_url}><{$product.goods_url}><{else}><{link app=b2c ctl=site_product act=index arg=$product.goods_id}><{/if}>" title="<{$product.name|escape:html}>" class="entry-title">
            <{$product.name|escape:"html"}>
            </a>
            <{if $product.tags}>
            <{foreach from=$product.tags item=tags}>
            <{if $tags.params.tag_showOnIndex}>
            &nbsp;<span class="tag-label" style="background-color:<{$tags.tag_bgcolor}>;color:<{$tags.tag_fgcolor}>"><{$tags.tag_name}></span>
            <{/if}>
            <{/foreach}>
            <{/if}>
            </h3>
          </div>
          
        </div>
        
        <div class="productShop">
            <a class="productShop-name" target='_blank' href="<{link app=business ctl=site_shop act=view  arg=$product.store_id}>">
             <{$product.store_name|escape:"html"}>
            </a>
             <!--<{input type='fixation' position=0 store_id=$product.store_id}>-->
         </div>
         <{if $showBuyCount=='true'||$env.conf.b2c.gallery.comment.time=='true'}>
        <div class="productStatus">
                <div class="sell_month">
                     <{if $showBuyCount=='true'}><em><{$product.buy_m_count}></em>月销量<{/if}>
                </div>
                <div class="say_month">
                     <{if $showBuyCount=='true' && $env.conf.b2c.gallery.comment.time=='true'}><{/if}><{if $env.conf.b2c.gallery.comment.time=='true'}><a target="_blank" href="<{if $product.goods_url}><{$product.goods_url}><{else}><{link app=b2c ctl=site_product act=index arg=$product.goods_id}><{/if}>#discuss_all_info" ><{$product.comments_count}></a>累计评价<{/if}>
                 </div>
        </div>
        <{/if}>
    </li>
    <{/foreach}>
  </ul>
  <{/if}>
</div>
<script>

$$('#gallery-grid-list .items-gallery').each(function(el){
        /*el.addEvents({
            mouseenter:function(){
               $(this).setStyles({'border-color':'#E4E4E4'});
            }.bind(el),
            mouseleave:function(){
              $(this).setStyles({'border-color':'#FFFFFF'});
            }.bind(el)
        });*/
        var productThumb=el.getElement('.productThumb');
        var pre=productThumb.getFirst();
        var next=productThumb.getLast();
        var content=productThumb.getElement('.ks-switchable-content');
        var speclist=content.getElements('b');
         var chLength=speclist.length;
         
            if(chLength<=0){
              // productThumb.hide();
              pre.hide();
              next.hide();
              return;
            }
            speclist.each(function(el){
              el.addEvent('click',function(){
                  speclist.map(function(se){
                    if(se==this){
                         $(this).addClass('proThumb-selected');
                    }else{
                         se.removeClass('proThumb-selected');
                    }
                  }.bind(this));
                  var goods_image=$(this).get('goods_image');
                  var goods_link=$(this).get('goods_link');
                  if(goods_image!=''){
                      var img_lazyload=productThumb.getPrevious().getElement('.img-lazyload');
                      img_lazyload.set('src',goods_image);
                      img_lazyload.getParent('a').set('href',goods_link);
                  }
              }.bind(el));
            });
            var conWidth=chLength*37;
             content.setStyle('width',conWidth+'px');
            if(chLength<=5){
              next.hide();
              pre.hide();
              return;
            }

            next.addEvent('click',function(){                
                var left=content.getStyle('left');                    
                    left=left.toInt();
                var size=$(content).getSize();
                  var   width=size.x.toInt();
                    if(width-Math.abs(left)<185){
                       return;
                    }
                    if(Browser.ie){
                        left=left-185;
                    }else{
                        left=left-184;
                    }
                    if(left<185){
                       this.addClass('proThumb-disable');
                    }
                    pre.removeClass('proThumb-disable');
                    content.setStyle('left',left+'px');
            
            });
            pre.addEvent('click',function(){
                var left=content.getStyle('left');
                    left=left.toInt();
                    if(left>=0){
                      return;
                    }
                    if(Browser.ie){
                        left=left+185;
                    }else{
                        left=left+184;
                    }
                    if(left>=0){
                       this.addClass('proThumb-disable');
                    }
                    
                    next.removeClass('proThumb-disable');
                    content.setStyle('left',left+'px');
            });
}.bind(this)
);
var opiton={
    autoRowSize: {'h3': 'height'},
    cols:<{$gallery_display|default:4}>
};
/*可以在全局定义 GALLERY_AutoFloatGrid_Options  覆盖 AutoFloatGrid 的options*/
//opiton=Object.merge(opiton,('GALLERY_AutoFloatGrid_Options' in window) ? GALLERY_AutoFloatGrid_Options: {});
//new AutoFloatGrid('gallery-grid-list', $$('#gallery-grid-list .items-gallery'),opiton );
  /*AUTO HEIGHT*/
  window.addEvent('domready',function(){
    var getAmongPos = function(size,to){
      var elpSize = $(to).getSize(),elpScroll = $(to).getScroll();
      return {
        'top':Math.abs((elpSize.y/2).toInt()-(size.height/2).toInt()+to.getPosition().y+elpScroll.y),
        'left':Math.abs((elpSize.x/2).toInt()-(size.width/2).toInt()+to.getPosition().x+elpScroll.x)
      };
    };
    Ex_Event_Group['_zoomImg_']={fn:function(el,e){
      e.stop();
      if(el.retrieve('active'))return;
      el.store('active',true);
      var tpic = el.getParent('.goods-main').getPrevious('.goodpic').getElement('img');
      var bpic_src = el.get('pic');
      var loading = new Element('div',{
        styles:{'background':'#fff url(<{$env.app.res_url}>/images/loading.gif) no-repeat 50% 50%',
          'width':40,
          'height':40,
          'border':'1px #e9e9e9 solid',
          'opacity':.5}}).inject(document.body).position({target:tpic});
      new Asset.image(bpic_src,{onload:function(img){
          loading.destroy();
          var winsize = window.getSize();
          var imgSize = $(img).zoomImg(winsize.x,winsize.y,1);
            var fxv = Object.append(getAmongPos(imgSize,window),imgSize,{'position':'absolute','z-index':2});
          var imgFx = new Fx.Morph(img,{link:'cancel'});
          img.setStyles(Object.append(tpic.getCoordinates(),{opacity:0.5})).inject(document.body).addClass('img-zoom').addEvent('click',function(){
            imgFx.start(tpic.getCoordinates()).chain(function(){this.element.destroy();el.store('active',false);});
          });
          imgFx.start(Object.append(fxv,{opacity:1}));
          document.addEvent('click',function(){
            img.fireEvent('click');
            document.removeEvent('click',arguments.callee);
          });
          },onerror:function(){
            _this.store('active',false);
            loading.destroy();
      }});
  }}
    /*
    *商品标签定位
    */
    var tips = $$('.goods-tip');

    //var opacity = tips.getElement('img').get('op')[0];
    //tips.getElement('img').setStyle('opacity',opacity);
    if(tips.length>0){
      var parSize = {
        x : tips.getParent('.goodpic')[0].getSize().x,
        y : tips.getParent('.goodpic')[0].getSize().y
      };
      var GoodsTipPos= {
        tl:{left:0,top:0},
        tc:{left:(parSize.x)/2 - 25,top:0},
        tr:{top:0,right:0},
        ml:{left:0,top:(parSize.y)/2 - 25},
        mc:{left:(parSize.x)/2 - 25,top:(parSize.y)/2 -25},
        mr:{top:(parSize.y)/2 - 25,right:0},
        bl:{bottom:0,left:0},
        bc:{bottom:0,left:(parSize.x)/2 - 25},
        br:{bottom:0,right:0}
      };
      /*.setStyles({
        'top':Pos.top,
        'left':Pos.left,
        'right':Pos.right,
        'bottom':Pos.bottom
      });
      */
      tips.each(function(v){
        v.getElement('img').zoomImg(50,50);
        var ImgSrc = v.getElement('img').get('src');
        var ImgStr = "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ImgSrc+"')";
        if(Browser.ie6)
        v.getElement('img').setStyle('filter',ImgStr);
        var proPos = v.getElement('img').get('pos');
        var Pos = GoodsTipPos[proPos];
        //      if(Browser.ie6) {
          //     if(Pos.left === 0 && Pos.top===0)
          //         Pos.left -= v.getParent().getSize().x/2;
          //    };
        v.setStyles({
          'top':Pos.top,
          'left':Pos.left,
          'right':Pos.right,
          'bottom':Pos.bottom
        });
        //if(Browser.ie6) {
          //      if(Pos.left === 0 && Pos.top===0)
          //    Pos.left += v.getParent().getSize().x/2
          //};
      });
    }
  });
</script>
